<template>
  <div>
    <el-container>
      <el-header class="index-header"
        ><div class="main"><Header /></div
      ></el-header>
      <el-main class="index-contain"
        ><div class="main"><router-view /></div
      ></el-main>
      <el-footer><Footer /></el-footer>
    </el-container>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
export default {
  name: 'Index',
  components: { Footer, Header },
}
</script>

<style scoped>
.index-header {
  width: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  background-color: white;
  box-shadow: 2px 2px 2px #cbcbcb96;
}
.index-contain {
  /* background-color: #f1e9eb; */
  margin-top: 50px;
  padding-left: 150px;
  padding-right: 150px;
}
.index-contain .main,
.index-header .main {
  display: flex;
  justify-content: center;
}
</style>
